<template>
  <div class="searchBox">
    <!-- 搜索条件 -->
    <div class="search" :style="{flexWrap:queryItem.length>5?'wrap':''}">
      <div class="item" v-for="(item,index) in queryItem" :key="'a'+index">
        <div class="label">{{item.label}}</div>
        <!-- 输入框 -->
        <el-input v-if="item.type==='Input'" v-model="queryData[item.prop]" 
          placeholder="请输入内容" clearable>
        </el-input>
        <!-- 日期 -->
        <el-date-picker v-if="item.type==='Date'" v-model="queryData[item.prop]" type="date" 
          placeholder="请选择日期" clearable value-format="yyyy-MM-dd">
        </el-date-picker>
        <!-- 下拉框 -->
        <el-select v-if="item.type==='Select'" v-model="queryData[item.prop]" 
          placeholder="请选择内容" clearable>
          <el-option class="option" v-for="opt in item.options" :key="opt.value"
            :label="opt.label" :value="opt.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 搜索按钮 -->
    <div class="btnBox">
      <div class="btn" v-for="(btn,idx) in queryHandle" :key="'b'+idx">
        <el-button :type="btn.type" size="mini" round @click="btn.handle(queryData)">{{btn.label}}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    queryData: {
      type: Object,
      default: () => {}
    },
    queryItem: {
      type: Array,
      default: () =>[]
    },
    queryHandle: {
      type: Array,
      default: () =>[]
    }
  },
  data () {
    return {
      formData: this.queryData
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  updated () {},
  methods: {
    
  },
  filters: {},
}
</script>

<style lang="less" scoped>
.searchBox{
  background-color: #FFFFFF;
  margin-bottom: 15px;
  padding: 15px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search{
  display: flex;
  align-items: center;
  .item{
    display: flex;
    align-items: center;
    margin-right: 20px;
    padding: 5px 0;
    .label{
      width: 80px;
      text-align: center;
    }
  }
}
.btnBox{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 20px;
  .btn{
    display: flex;
    flex-direction: column;
    margin-left: 20px;
    &:nth-child(1){
      margin-left: 0px;
    }
  }
}
</style>